const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

const pagesObj = {};

const chromeName = ['popup', 'options'];

chromeName.forEach((name) => {
  pagesObj[name] = {
    entry: `src/${name}/index.js`,
    template: `src/${name}/index.html`,
    filename: `${name}.html`,
  };
});

const plugins =
  process.env.NODE_ENV === 'production'
    ? [
        {
          from: path.resolve('src/manifest.production.json'),
          to: `${path.resolve('dist')}/manifest.json`,
        },
        {
          from: path.resolve('./src/js/index.js'),
          to: `${path.resolve('dist')}/js/index.js`,
        },
      ]
    : [
        {
          from: path.resolve('src/manifest.development.json'),
          to: `${path.resolve('dist')}/manifest.json`,
        },
        // {
        //   from: path.resolve('./src/js/index.js'),
        //   to: `${path.resolve('dist')}/js/index.js`,
        // },
      ];

module.exports = {
  filenameHashing: false,
  productionSourceMap: false,
  publicPath: './',
  pages: pagesObj,
  configureWebpack: {
    plugins: [
      CopyWebpackPlugin(plugins),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
};
